/* Picto chat */

    @font-face {
	font-family: "NDS-Bios";
	src: url("../Fonts/nds-bios.ttf") format("opentype");
}

body {
    max-height: 580px;
}

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 18px;
            scrollbar-width: thin;
        }

        ::-webkit-scrollbar-track {
            background-color: #ffffff;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #cecece;
            border: 4px solid transparent;
            border-radius: 8px;
            background-clip: content-box;
        }

        /* Buttons */
        ::-webkit-scrollbar-button:single-button {
            height: 19px;
            width: 19px;
        }

        /* Up */
        ::-webkit-scrollbar-button:single-button:vertical:decrement {
            background-image: url("img/dsonlineicon.png");
            image-rendering: pixelated;
            background-repeat: no-repeat;
        }

        /* Down */
        ::-webkit-scrollbar-button:single-button:vertical:increment {
            background-image: url("img/loadingicon.gif");
            image-rendering: pixelated;
            background-repeat: no-repeat;
        }

        .box {
            background: linear-gradient(0deg, #ababab, #dbdbdb 90%, white);
            padding: 3px 2px 3px 3px;
            z-index: 1;
            width: 260px;
            height: 375px;
            border-radius: 10px;
        }

        /* Pixel size 2px */
        .picto {
            background: linear-gradient(0deg, rgba(170, 170, 170, 1) 75%, rgba(186, 186, 186, 1) 75%);
            background-size: 100% 8px;
            border-top: #f2f2f2 solid 2px;

            width: 257px;
            height: 137px;
            top: 40px;
            left: 1px;
            padding: 0.1px;
            line-height: 25px;
            font-size: 15px;
            font-family: 'NDS-Bios';
            padding-right: 0px;
            font-weight: 400;
            text-align: left;

            position: relative;
            image-rendering: pixelated;
            overflow-y: auto;
            transform: scaleX(-1)
        }


        .picto>br {
            display: none
        }

        .picto>div {
            --col1: white;
            --col: #ff9784;

            margin: 4px 4px;
            padding: 6px 12px;
            text-indent: 90px;

            background: #fff0;
            box-sizing: border-box;
            position: relative;
            z-index: 0;
            transform: scaleX(-1)
        }

        .picto>div::before {
            content: '';
            position: absolute;

            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--col1);

            z-index: -1;
            clip-path: polygon(0 8px, 2px 8px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 8px 2px, 8px 0,
                    calc(100% - 8px) 0px, calc(100% - 8px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 8px, calc(100% - 0px) 8px,
                    calc(100% - 0px) calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) calc(100% - 0px),
                    8px calc(100% - 0px), 8px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 8px), 0px calc(100% - 8px));
        }

        .picto>div::after {
            content: '';
            position: absolute;

            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--col);

            z-index: -1;
            clip-path: polygon(4px 8px, 4px 6px, 6px 6px, 6px 4px, 8px 4px, 8px 2px,
                    calc(100% - 8px) 2px, calc(100% - 8px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 8px, calc(100% - 2px) 8px,
                    calc(100% - 2px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) calc(100% - 2px),
                    8px calc(100% - 2px), 8px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 8px), 2px calc(100% - 8px),

                    2px 8px, 4px 8px,
                    4px calc(100% - 8px), 6px calc(100% - 8px), 6px calc(100% - 6px), 8px calc(100% - 6px), 8px calc(100% - 4px),
                    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px),
                    calc(100% - 4px) 8px, calc(100% - 6px) 8px, calc(100% - 6px) 6px, calc(100% - 8px) 6px, calc(100% - 8px) 4px,
                    8px 4px, 8px 6px, 6px 6px, 6px 8px, 4px 8px)
        }

        .picto>div.enter {
            color: Yellow;
            --col1: black;
            --col: rgb(255, 255, 255);
            text-indent: 0;
        }

        .picto>div>div:first-of-type {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 80px;
            height: 25px;

            text-indent: 10px;
            z-index: 0;
            color: var(--col);
        }

        .picto>div>div:last-of-type {
            padding: 3px;
            text-indent: 0px;
            line-height: 18px;
        }

        .picto>div>div:first-of-type::before {
            content: '';
            position: absolute;

            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--col);
            opacity: 0.2;

            z-index: -1;
            clip-path: polygon(0px 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0px,
                    100% 0,
                    calc(100% - 0px) calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) calc(100% - 0px),
                    4px calc(100% - 0px), 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0px calc(100% - 4px))
        }

        .picto>div>div:first-of-type::after {
            content: '';
            position: absolute;

            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--col);
            outline: var(--col) solid 2px;

            z-index: -1;
            clip-path: polygon(100% 0, calc(100% + 2px) 0,
                    calc(100% + 2px) calc(100% + -4px), calc(100% + 0px) calc(100% + -4px), calc(100% + 0px) calc(100% + -2px), calc(100% + -2px) calc(100% + -2px), calc(100% + -2px) calc(100% + 0px), calc(100% + -4px) calc(100% + 0px), calc(100% + -4px) calc(100% + 2px),
                    4px calc(100% + 2px), 4px calc(100% + 0px), 2px calc(100% + 0px), 2px calc(100% + -2px), 0 calc(100% + -2px), 0 calc(100% + -4px),
                    0px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 0px),
                    calc(100% - 4px) calc(100% - 0px), calc(100% - 4px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 4px), calc(100% - 0px) calc(100% - 4px))
        }

        .picto>div img:first-of-type {
            position: absolute;
            top: 0;
            left: auto;
            right: auto;
            width: 468px;
            pointer-events: none;
        }

        .headertitle {
            position: absolute;
            font-size: 21px;
            ;
            top: -6px;
            width: 245px;
            font-family: 'NDS-Bios';
            font-weight: bold;
            color: rgb(255, 255, 255);
            letter-spacing: 1px;
            background-color: #ff9784;
            padding: 10px;
            z-index: 3;
            border-radius: 10px 10px 0px 0px;

        }

        a {
            color: #ff9784;
            text-decoration: underline dotted;
        }